<template>
  <el-dialog
    :visible.sync="show"
    width="600px"
    top="10vh"
    :before-close="beforeClose"
    :close-on-click-modal="false"
  >
    <template #title>
      <h2 style="margin: 0; color: #333">{{ isEdit ? '修改用户' : '添加用户' }}</h2>
    </template>
    <el-form
      :model="formData"
      :rules="rules"
      ref="formRef"
      label-width="100px"
      size="medium"
      :before-close="beforeClose"
    >
      <el-form-item label="用户名" prop="username">
        <el-input v-model="formData.username" placeholder="请输入用户名"></el-input>
      </el-form-item>

      <el-form-item label="密码" prop="password" v-if="!isEdit">
        <el-input
          type="password"
          clearable
          show-password
          v-model="formData.password"
          placeholder="请输入密码"
        ></el-input>
      </el-form-item>

      <el-form-item label="手机号" prop="phone">
        <el-input v-model="formData.phone" placeholder="请输入手机号"></el-input>
      </el-form-item>

      <el-form-item label="姓名" prop="realName">
        <el-input v-model="formData.realName" placeholder="请输入真实姓名"></el-input>
      </el-form-item>

      <el-form-item label="身份证" prop="realName">
        <el-input v-model="formData.idCard" placeholder="请输入真实姓名"></el-input>
      </el-form-item>

      <el-form-item label="性别" prop="gender">
        <el-radio-group v-model="formData.gender">
          <el-radio border label="1">男</el-radio>
          <el-radio border label="2">女</el-radio>
          <el-radio border label="0">保密</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="是否在职" prop="isActive">
        <el-switch v-model="formData.isActive" active-value="1" inactive-value="0"></el-switch>
      </el-form-item>

      <el-form-item label="是否禁用" prop="isDisabled">
        <el-switch v-model="formData.isDisabled" active-value="1" inactive-value="0"></el-switch>
      </el-form-item>
    </el-form>
    <div slot="footer" style="padding-right: 10px">
      <el-button @click="closeDialog">取 消</el-button>
      <el-button type="primary" @click="submitForm">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { addUserApi, updateUserApi } from '@/api/user'
import md5 from 'js-md5'
export default {
  props: {
    show: {
      type: Boolean,
      default: false
    },
    editRow: {
      type: Object,
      default: () => ({})
    }
  },
  computed: {
    isEdit() {
      return !!this.editRow.userId
    }
  },
  watch: {
    show(value) {
      if (value && this.editRow.userId) {
        this.formData = { ...this.editRow }
      }
    }
  },
  data() {
    return {
      rules: {
        username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
        realName: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
        idCard: [{ required: true, message: '请输入身份证号', trigger: 'blur' }],
        phone: [{ required: true, message: '请输入手机号码', trigger: 'blur' }],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 6, max: 16, message: '长度在 6 到 16 个字符', trigger: 'blur' }
        ]
      },
      formData: {
        userId: null,
        username: 'normal',
        password: 'mo123456',
        realName: '测试用户',
        idCard: '440111111111111111',
        phone: '13800000000',
        gender: '1',
        isActive: '1',
        isDisabled: '0'
      }
    }
  },
  methods: {
    // 提交表单
    submitForm() {
      this.$refs.formRef.validate(async valid => {
        if (valid) {
          let res
          if (this.isEdit) {
            res = await updateUserApi(this.formData)
          } else {
            res = await addUserApi({
              ...this.formData,
              password: md5(this.formData.password)
            })
          }
          if (res.success) {
            this.$message.success(this.isEdit ? '修改成功！' : '添加成功！')
            // 关闭弹窗
            this.beforeClose()
            this.$emit('close', { update: true })
          }
        }
      })
    },
    closeDialog() {
      this.beforeClose()
      this.$emit('close', { update: false })
    },
    beforeClose() {
      this.$refs.formRef.clearValidate()
      this.$emit('update:show', false)
      this.$emit('reset')
      this.resetForm()
    },
    // 重置表单
    resetForm() {
      this.formData = { ...this.$options.data().formData }
    }
  }
}
</script>

<style scoped lang="scss">
::v-deep .el-radio {
  margin-right: 0;
}
</style>
